梦入琼楼寒有月，行过石树冻无烟

D3 量子比例尺

2022-04-21

量子比例尺


量子比例尺（Quantize Scale）中所定义的定义域是连续的，而值域却是一个离散的，根据输入的不同，对应相应的值域。当使用量子比例尺后，定义域将会被换分为5段，每一段对应值域的值：

1
2
3
4
5
var quantize = d3.scale.quantize()
	.domain([0,10])
	.range(["blue","red","green","yellow","black"])

console.log(quantize(5.2222))

在上述的 code中，5.2222对应了值域中的green，默认的情况下，当输入的数值大于定义域，将会默认对应数值中最后一个值。假设我们输出一个15.2222，那么经过量子比例尺的计算，虽然超过定义域的大小，但最终所对应的数值为最后一个，即black，这也符合了量子的定义，即：“一个物理量如果存在一个最小的不可分割的基本单位中的不可分割”：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var quantize = d3.scale.quantize()
	/*
		/—— .d3.scale.quantize()
		/———— 在此定义定量比例尺以及对应的值域颜色
	 */
	.domain([0,100])
	.range(["#0000CC","#0033CC","#0066CC","#0099CC","#00CCCC","#00FFCC","#3300CC","#3333CC","#3366CC","#3399CC"])

var r = [100,90,80,70,60,50,40,30,20,10] /* 圆的半径 */

var svg = d3.select("body")
	/*
		/—— d3.select("body").append("svg")，
		/———— 在 body 元素中的下面插入一个 svg 元素。高为 1400，宽为 1400
	 */
	.append("svg")
	.attr("width",200)
	.attr("height",300)

svg.selectAll("circle")
	/*
		/—— data()
		/———— 绑定 circle 为 r 的半径
		/—— enter()
		/———— 补足足够数量的 circle 元素
		/—— append()
		/———— 在srg 元素后插入一个 circle 元素
		/—— cx and cy
		/————  设置 x 坐标位置以及间隔大小
		/————— 高度位置设置为 190
	 */
	.data(r)
	.enter()
	.append('circle')
	.attr("cx",function (d,i) {
		return 100 + i * 10
	})
	.attr("cy",190)
	.attr("r",function (d) {
		return d
	})
	.attr("fill", function (d) {
		return quantize(d);
	});

分位比例尺

通常的情况下，量子比例尺和分位比例尺（Quantile Scale）是一起来介绍的，因为他们基本相同但不完全相同。首先，量子比例尺的分段为5，而分段比例尺的分段为3，所以造成同样是十个数据，一个数据一一对应而另一个数据却参差不齐的发生：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var quantize = d3.scale.quantize()
	.domain([0,10])
	.range(["blue","red","green","yellow","black"])
console.log(quantize(0))
console.log(quantize(1))
console.log(quantize(2))
console.log(quantize(3))
console.log(quantize(4))
console.log(quantize(5))
console.log(quantize(6))
console.log(quantize(7))
console.log(quantize(8))
console.log(quantize(9))
console.log(quantize(10))

console.log("-----------")
var quantile = d3.scale.quantile()
	.domain([0,13])
	.range(["blue","red","green","yellow","black"])

console.log(quantile(0))
console.log(quantile(1))
console.log(quantile(2))
console.log(quantile(3))
console.log(quantile(4))
console.log(quantile(5))
console.log(quantile(6))
console.log(quantile(7))
console.log(quantile(8))
console.log(quantile(9))
console.log(quantile(10))
⬅️ Go back